<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        column-count: 4;
        column-gap: 10px; /* 设置列之间的间隔 */
      }

      .container img {
        display: inline-block;
        width: 100%;
        object-fit: cover;
        margin-bottom: 10px; /* 设置图片之间的间隔 */
      }

      @media screen and (max-width: 980px), screen and (max-width: 768px) {
        /* 在屏幕宽度小于 980px 或大于 768px 时应用的样式 */
        /* 在屏幕宽度小于 980px 时，设置容器为 3 列 */
        .container {
          column-count: 3;
        }
      }
      @media (max-width: 767px) {
        /* 在屏幕宽度小于 768px 时，设置容器为 2 列 */
        .container {
          column-count: 2;
        }
      }

      @media (max-width: 480px) {
        /* 在屏幕宽度小于 480px 时，设置容器为 1 列 */
        .container {
          column-count: 1;
        }
      }

      @media (min-width: 1200px) {
        /* 在屏幕宽度大于 1200px 时，设置容器为 4 列 */
        .container {
          column-count: 4;
        }
      }
    </style>
  </head>
  <body>
    <!-- https://picsum.photos/200/250
https://picsum.photos/300/250
https://picsum.photos/400/250
https://picsum.photos/500/250
https://picsum.photos/600/250
https://picsum.photos/700/250
https://picsum.photos/800/250
https://picsum.photos/900/250
https://picsum.photos/1000/250
https://picsum.photos/1100/250
https://picsum.photos/1200/250
https://picsum.photos/1300/250
https://picsum.photos/1400/250
https://picsum.photos/1500/250
https://picsum.photos/1600/250
https://picsum.photos/1700/250
https://picsum.photos/1800/250
https://picsum.photos/1900/250
https://picsum.photos/2000/250
https://picsum.photos/2100/250 -->
    <div class="container">
      <div class="item"><img src="https://picsum.photos/200/300" /></div>
      <div class="item"><img src="https://picsum.photos/400/600" /></div>
      <div class="item"><img src="https://picsum.photos/1440/2560" /></div>
      <div class="item"><img src="https://picsum.photos/800/600" /></div>
      <div class="item"><img src="https://picsum.photos/1024/768" /></div>
      <div class="item"><img src="https://picsum.photos/1200/800" /></div>
      <div class="item"><img src="https://picsum.photos/1600/900" /></div>
      <div class="item"><img src="https://picsum.photos/1920/1080" /></div>
      <div class="item"><img src="https://picsum.photos/2560/1440" /></div>
      <div class="item"><img src="https://picsum.photos/3840/2160" /></div>
      <!-- Dividing line -->
      <div class="item"><img src="https://picsum.photos/200/250" /></div>
      <div class="item"><img src="https://picsum.photos/300/250" /></div>
      <div class="item"><img src="https://picsum.photos/400/250" /></div>
      <div class="item"><img src="https://picsum.photos/500/250" /></div>
      <div class="item"><img src="https://picsum.photos/600/250" /></div>
      <div class="item"><img src="https://picsum.photos/800/250" /></div>
      <div class="item"><img src="https://picsum.photos/1100/250" /></div>
      <div class="item"><img src="https://picsum.photos/2100/250" /></div>
      <div class="item"><img src="https://picsum.photos/2000/250" /></div>
      <div class="item"><img src="https://picsum.photos/1700/250" /></div>
    </div>
  </body>
</html>
